import React from 'react';
import { useParams } from 'react-router-dom';

const ModelTraining = () => {
  const { subpage } = useParams();
  
  // 如果没有二级页面参数，使用默认值
  const currentSubpage = subpage || 'algorithm';
  
  const getPageTitle = () => {
    switch(currentSubpage) {
      case 'algorithm': return '算法选择';
      case 'parameters': return '参数调优';
      case 'validation': return '模型验证';
      case 'performance': return '表现分析';
      default: return '模型训练';
    }
  };
  
  const getPageContent = () => {
    switch(currentSubpage) {
      case 'algorithm':
        return (
          <div className="page-content">
            <h3>算法选择</h3>
            <p>选择适合的机器学习算法进行模型训练...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>算法选择界面</p>
            </div>
          </div>
        );
      case 'parameters':
        return (
          <div className="page-content">
            <h3>参数调优</h3>
            <p>调整模型参数以提高预测准确性...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>参数调优界面</p>
            </div>
          </div>
        );
      case 'validation':
        return (
          <div className="page-content">
            <h3>模型验证</h3>
            <p>使用交叉验证等方法评估模型性能...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>验证结果图表</p>
            </div>
          </div>
        );
      case 'performance':
        return (
          <div className="page-content">
            <h3>表现分析</h3>
            <p>分析模型在实际应用中的表现...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>模型表现图表</p>
            </div>
          </div>
        );
      default:
        return <p>请从左侧选择训练选项</p>;
    }
  };

  return (
    <div className="page-container">
      <h2>{getPageTitle()}</h2>
      {getPageContent()}
    </div>
  );
};

export default ModelTraining;